<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" th:href="@{/node_modules/element-ui/lib/theme-chalk/index.css}">
    <link rel="stylesheet" th:href="@{/css/login.css}">
    <link rel="stylesheet" th:href="@{/node_modules/font-awesome/css/font-awesome.min.css}">
</head>
<body>
<div class="login-container" id="app">
    <template>
        <el-form id="loginForm" autocomplete="on" :model="loginForm" :rules="loginRules"
                 ref="loginForm" label-position="left" label-width="0px" class="card-box login-form" method="post">
            <h3 class="title">emite管理系统</h3>
            <el-form-item prop="username">
                <span class="svg-container"><i class="fa fa-user-o" aria-hidden="true"></i></span>
                <el-input name="username" type="text" v-model="loginForm.username" autocomplete="on"
                          placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <span class="svg-container"><i class="fa fa-lock" aria-hidden="true"></i></span>
                <el-input name="password" type="password" v-model="loginForm.password" autocomplete="on"
                          placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item prop="validatecode">
                <span class="svg-container"><i class="fa fa-qrcode" aria-hidden="true"></i></span>
                <el-input name="validatecode" type="text" v-model="loginForm.validatecode" placeholder="验证码"
                          class="validate"></el-input>
                <img src="/validateCode" alt="" class="validate-code" @click="codeChange">
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="width:100%;" @click="submitForm('loginForm')" long>
                    登录
                </el-button>
            </el-form-item>
        </el-form>
    </template>
</div>
<!-- 先引入 Vue -->
<script th:src="@{/node_modules/vue/dist/vue.min.js}"></script>
<!-- 引入组件库 -->
<script th:src="@{/node_modules/element-ui/lib/index.js}"></script>
<script th:src="@{/node_modules/jquery/dist/jquery.min.js}"></script>
<script>
    var loginVue = new Vue({
        el: '#app',
        data: function () {
            return {
                loginForm: {
                    username: '',
                    password: '',
                    validatecode: ''
                },
                loginRules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: ['blur', 'change']}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: ['blur', 'change']},
                        {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: ['blur', 'change']}
                    ],
                    validatecode: [
                        {required: true, message: '请输入验证码', trigger: ['blur', 'change']}
                    ]
                }
            }
        },
        methods: {
            submitForm: function (formName) {
                var $this = this;
                this.$refs[formName].validate(function (valid) {
                    var loginForm = {
                        username: $this.loginForm.username,
                        password: $this.loginForm.password,
                        validatecode: $this.loginForm.validatecode
                    };
                    if (valid) {
                        $.ajax({
                            cache: true,
                            url: '/login',
                            type: 'POST',
                            data: JSON.stringify(loginForm),
                            dataType: 'json',
                            contentType: 'application/json',
                            async: false,
                            success: function (data) {
                                if (data.status == 1) {
                                    $this.$message(data.msg);
                                    window.location.href = '/';
                                } else {

                                    $this.$message.error(data.msg);
                                    $this.codeChange();
                                }
                            }
                        });
                    } else {
                        $this.codeChange();
                        return false;
                    }
                });
            },
            openError: function (error) {
                this.$message.error(error);
            },
            codeChange: function () {
                $('.validate-code').attr('src', '/validateCode?v=' + Math.random());
            }
        }
    });
    document.onkeydown = function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 13) { // 按 Esc
            loginVue.submitForm('loginForm');
        }
    }
</script>
</body>
</html>